<template>
  <div>
    <div v-if="!data" slot="empty" class="emptyBg">
      <el-empty :image-size="200"></el-empty>
    </div>
    <MyEcharts v-else :option="option" />
  </div>
</template>
<script>
export default {
  components: {
    MyEcharts: () => import("@/components/myEcharts/index.vue"),
  },
  data() {
    return {
      option: null,
      firstData: [],
    };
  },
  props: ["data"],
  watch: {
    data() {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (!this.data) return;
      this.firstData = this.uniqueById(this.data.map((v) => v.level1));
      this.initEcharts(this.data);
    },
    initEcharts(data) {
      let series = [];
      this.firstData.forEach((v) => {
        let item = data.filter((m) => m.level1.id == v.id);
        let arr1 = [];
        for (var i = 0; i < item.length; i++) {
          let x = Math.floor(Math.random() * 100 + 2);
          let y = Math.floor(Math.random() * 100 + 10);
          let arr = [x, y, data[i]];
          arr1.push(arr);
        }
        let op = {
          data: arr1,
          name: v.name,
          type: "scatter",
          symbolSize: function (data) {
            let num = parseInt(data[2].num) + 10;
            return num;
          },
        };
        series.push(op);
      });

      // 散点图
      this.option = {
        tooltip: {
          formatter: function (param) {
            var value = param.value;
            return (
              '<div style="font-size: 14px;padding: 7px;margin-bottom: 2px">' +
              "思政元素：" +
              value[2].level3.name +
              "<br>" +
              "引用次数：" +
              value[2].num +
              "</div>"
            );
          },
        },
        legend: {
          top: 10,
          data: ["北京"],
          textStyle: {
            fontSize: 16,
          },
        },
        xAxis: {
          axisLabel: {
            show: false, //不显示坐标轴上的文字
          },
          splitLine: {
            show: false, //不显示网格线
          },
        },
        yAxis: {
          show: false,
          axisLabel: {
            show: false, //不显示坐标轴上的文字
          },
          splitLine: {
            show: false, //不显示网格线
          },
        },
        series: series,
      };
      var legend = {
        data: this.firstData.map((v) => v.name),
      };
      this.$set(this.option, "legend", legend);
    },
  },
};
</script>
<style scoped lang="scss">
</style>